<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1" import="java.util.Iterator"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Athenaeum : Trainings</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jsp:include page="../assets/header.jsp" />

</head>
<body>
	<jsp:include page="../assets/navbar-top.jsp" />
	<div class="page-wrap">
		<div class="container-fluid">
			<div class="row page-wrap-header">
				<div class="col-md-12">
					<header>
						<div class="aui-page-header-inner">
							<div class="aui-page-header-main">
								<h2 id="summary-val">Search</h2>
								<div class="aui-page-header-search">Type:</div>
							</div>
						</div>
					</header>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div id="browse-trainings" class="row row-wrap">
						<div class="col-md-3">
							<div class="list-ordering">
								<div class="dropdown">
									<b class="text-muted">Order by</b> | <a id="orderby"
										data-toggle="dropdown" data-target="#" href="#"><span
										class="caret"></span> </a>
									<ul class="dropdown-menu" role="menu">
										<li><a href="#">Action</a></li>
										<li><a href="#">Another action</a></li>
										<li><a href="#">Something else here</a></li>
										<li class="divider"></li>
										<li><a href="#">Separated link</a></li>
									</ul>
								</div>
							</div>
							<div id="training-item-list" class="list-group">
								<c:forEach var="trainingRecord" items="${trainingRecords}">
									<a class="list-group-item"
										href="${pageContext.request.contextPath}/training/browse/${trainingRecord.key}/${trainingRecord.id}"
										data-training-key="${trainingRecord.id}"><i
										class="fa fa-list-alt fa-fw"></i> ${trainingRecord.title}</a>
								</c:forEach>
							</div>
						</div>
						<div class="col-md-9">
							<div id="split-item-content"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="../assets/footer.jsp" />
	<script type="text/javascript">
		$(document).ready(function() {
			$('a[data-training-key]').click(function(event) {
				$('#training-item-list>a.active').removeClass('active');
				$.ajax({
					url : $(event.target).attr("href"),
					type : "GET",
					cache : false,
					dataType : 'html',
					success : function(data) {
						$('#split-item-content').html(data);
					}
				});
				$(event.target).addClass('active');
				event.preventDefault();
			});

		});
	</script>
</body>
</html>

